<template>
  <div class="goods-bgk-box">
    <div class="goods-box-header">
      <div @click="goBack" class="back"><van-icon name="arrow-left" /></div>
      <a href="javascript:void (0)" @click="tabsColor(1)" class="change-active">
        <p>商品 </p>
        <span v-if="active===1"/>
      </a>
      <a href="javascript:void (0)"  @click="tabsColor(2)" class="change-active">
        <p>评价 </p>
        <span v-if="active===2"/>
      </a>
      <a href="javascript:void (0)"  @click="tabsColor(3)" class="change-active">
        <p>详情</p>
        <span v-if="active===3"/>
      </a>
    </div>
    <div class="safe"/>
    <div class="goods-nav-image">
      <van-swipe :autoplay="3000" indicator-color="white" @change="onChange">
        <van-swipe-item v-for="(item,index) in parseInt(goods.length)" :key="index" >
          <div class="product-item" >
            <div v-for="(items,index1) in goods.slice(item-1,item)" :key="index1" class="item">
              <img :src="items.img" alt="">
            </div>
          </div>
        </van-swipe-item>
        <template #indicator>
          <div class="dot">
            <div v-for="(item,index) in parseInt(goods.length)" :key="index" :class="{'active':index===currentIndex}" class="custom-indicator"/>
          </div>
        </template>
      </van-swipe>
    </div>
    <div class="goods-item">
      <div class="content-desc">
        ZZB 平板电脑 10 英寸 Android 11 平板电脑，32GB ROM 512GB 扩展，6000mah 电池，四核处理器 2GB RAM 平板电脑，8MP 摄像头 WiFi BT 10.1'' IPS 高清触摸屏，10IN 平板电脑。
      </div>
      <div class="goods-home">
        <span>单价 <i>$48.71</i></span>
        <span>销量：2100</span>
      </div>
      <div class="good-image">
        <p class="good-title">尺码: 4 件装（节省 15 美元）</p>
        <div class="good-title">
          <div class="btn-title-goods">4 件装（节省 15 美元）</div>
          <div class="btn-title-goods">4 件装（节省 15 美元）</div>
        </div>
        <p class="good-title margin-bottom">颜色: 4. 4 件装：安全带 (X4)（节省 15 美元）</p>
        <div class="box-image">
          <div class="box" :class="{'box-checked':checkedBox===1}">
            <img src="../../assets/image/81uqiMuZBKL._AC_UL1500_.jpg" alt="">
          </div>
          <div class="box">
            <img src="../../assets/image/81uqiMuZBKL._AC_UL1500_.jpg" alt="">
          </div>
          <div class="box">
            <img src="../../assets/image/81uqiMuZBKL._AC_UL1500_.jpg" alt="">
          </div>
          <div class="box">
            <img src="../../assets/image/81uqiMuZBKL._AC_UL1500_.jpg" alt="">
          </div>
        </div>
      </div>

      <div class="good-cell-box">
        <div class="label width-50">发货</div>
        <div class="content">
          商品下单后，24小时内发货。如下单存在物流管控，订单可能被延时发货，请留意订单物流信息或联系客服
        </div>
<!--        <div class="icon"></div>-->
      </div>
      <div class="good-cell-box">
        <div class="label width-50" style="display: flex;align-items: center">运费</div>
        <div class="content"></div>
        <div class="icon">免运费 <van-icon name="arrow" /></div>
      </div>
      <div class="good-cell-box">
        <div class="label width-50" style="display: flex;align-items: center">税费</div>
        <div class="content"></div>
        <div class="icon">$0.00</div>
      </div>
      <div class="good-cell-box" id="userReviews">
        <div class="label width-80" style="display: flex;align-items: center">已选数量</div>
        <div class="content"></div>
        <div class=" width-150">
          <van-stepper button-size="22" v-model="value" step="1" />
        </div>
      </div>
      <div class="good-cell-chat" >
        <div class="top">
          <span>用户评价(20)</span>
          <van-icon name="arrow" />
        </div>
        <div class="content">
          <span>有图：1200</span>
          <span>差评：1200</span>
          <span>好评：1200</span>
          <span>中评：32</span>
        </div>
      </div>

      <div class="goods-chat">
        <div class="chat-top">
          <img src="@/assets/image/avatar1.png" alt="">
          <span>el*****</span>
        </div>
        <div class="goods-rate">
          <van-rate  :size="18" v-model="value"   color="#002FFF" />
          <span>订单已完成</span>
        </div>
        <div class="good-content">
          title says it all. tablet works fine. its a bit slow but thats what you pay for. the " YELLYOUTH 10.1 inch Android Tablet Case,DETUOSI PU Leather Folio Cover Compatible with Yuntab 10.1 " etc. was recommended as the case for this model. it was too small. the " (3 Pack) Supershieldz Designed for Onn 10.1 inch Tablet and Onn Tablet Pro 10.1 inch Screen Protector, High Definition Clear Shield (PET)" was the recommended screen protector for this. it was too big. you would think someone else would have made these comments by now
        </div>
        <div class="time">
          <span>毛里求斯 >> </span>
          <span> 2023-04-06 15:59:11 </span>
        </div>
      </div>
      <div class="goods-chat">
        <div class="chat-top">
          <img src="@/assets/image/avatar1.png" alt="">
          <span>el*****</span>
        </div>
        <div class="goods-rate">
          <van-rate  :size="18" v-model="value"   color="#002FFF" />
        </div>
        <div class="good-content">
          title says it all. tablet works fine. its a bit slow but thats what you pay for. the " YELLYOUTH 10.1 inch Android Tablet Case,DETUOSI PU Leather Folio Cover Compatible with Yuntab 10.1 " etc. was recommended as the case for this model. it was too small. the " (3 Pack) Supershieldz Designed for Onn 10.1 inch Tablet and Onn Tablet Pro 10.1 inch Screen Protector, High Definition Clear Shield (PET)" was the recommended screen protector for this. it was too big. you would think someone else would have made these comments by now
        </div>
        <div class="time">
          <span>毛里求斯 >> </span>
          <span> 2023-04-06 15:59:11 </span>
        </div>
      </div>
      <div class="goods-chat">
        <div class="chat-top">
          <img src="@/assets/image/avatar1.png" alt="">
          <span>el*****</span>
        </div>
        <div class="goods-rate">
          <van-rate  :size="18" v-model="value"   color="#002FFF" />
        </div>
        <div class="good-content">
          title says it all. tablet works fine. its a bit slow but thats what you pay for. the " YELLYOUTH 10.1 inch Android Tablet Case,DETUOSI PU Leather Folio Cover Compatible with Yuntab 10.1 " etc. was recommended as the case for this model. it was too small. the " (3 Pack) Supershieldz Designed for Onn 10.1 inch Tablet and Onn Tablet Pro 10.1 inch Screen Protector, High Definition Clear Shield (PET)" was the recommended screen protector for this. it was too big. you would think someone else would have made these comments by now
        </div>
        <div class="time">
          <span>毛里求斯 >> </span>
          <span> 2023-04-06 15:59:11 </span>
        </div>
      </div>
      <div class="goods-chat">
        <div class="chat-top">
          <img src="@/assets/image/avatar1.png" alt="">
          <span>el*****</span>
        </div>
        <div class="goods-rate">
          <van-rate  :size="18" v-model="value"   color="#002FFF" />
        </div>
        <div class="good-content">
          title says it all. tablet works fine. its a bit slow but thats what you pay for. the " YELLYOUTH 10.1 inch Android Tablet Case,DETUOSI PU Leather Folio Cover Compatible with Yuntab 10.1 " etc. was recommended as the case for this model. it was too small. the " (3 Pack) Supershieldz Designed for Onn 10.1 inch Tablet and Onn Tablet Pro 10.1 inch Screen Protector, High Definition Clear Shield (PET)" was the recommended screen protector for this. it was too big. you would think someone else would have made these comments by now
        </div>
        <div class="time">
          <span>毛里求斯 >> </span>
          <span> 2023-04-06 15:59:11 </span>
        </div>
      </div>

      <div class="store-shop" >
        <div class="store-top">
          <img src="../../assets/image/0d5a21f1-ed79-4cc9-8779-240cb4bf5732.png" alt="">
          <div class="right">
            <p> computer accessories store </p>
            <p> 好评率: 99% </p>
          </div>
          <a class="shop-nov" href="javascript:void (0)">访问店铺</a>
        </div>
        <div class="store-bottom" id="productDesc">
          <div class="box">
            <p>50</p>
            <p>所有产品</p>
          </div>
          <span/>
          <div class="box">
            <p>50</p>
            <p>关注</p>
          </div>
          <span/>
          <div class="box">
            <p>50</p>
            <p>销售量</p>
          </div>
        </div>
      </div>

      <div class="product-info" >
        <div class="title">产品描述</div>
        <div class="content">
          【Android 11.0 & 【高性能CPU】 ZZB ZB10平板搭载高性能四核CPU，采用Android 11.0系统，AI智能化，各项功能更上一层楼，操作更迅捷。并配备 RAM：2GB ROM：32GB，您可以感受到流畅的操作。非常适合观看视频、学习工具和阅读电子书。
          <br>  【IPS 显示 & 【双摄像头】10.1 英寸高清平板电脑配备高分辨率 10.1 英寸 1280*800 IPS 显示屏。尺寸高达 10.1 英寸，您可以获得更多空间，是观看电影和视频以及浏览网站的最佳选择。此外，还有“阅读模式”，减少对眼睛的有害光线，让你享受舒适的夜间阅读。它有双摄像头（后置 8 兆像素，前置 2 兆像素），可拍摄精彩照片和视频聊天。
          <br>    【512gb内存& 【大容量电池】Android 11 平板电脑配备 32GB 内置存储空间和高达 512GB 的可扩展 microSD 卡存储空间，可提供更多空间。此外，内置的6000mah电池可以长时间使用。您可以下载许多电影、电子书和音乐。电池一次充电可持续长达 12 小时，这使其成为一款极具吸引力的平板电脑。
          <br>    【GMS认证完成】平板通过谷歌移动服务（GMS）认证，预装Google Play支持Facebook、Twitter、YouTube、Tiktok、Line、Instagram等新潮社交应用，支持Microsoft Office软件。
          <br>  【馈赠佳品的理想选择】放心】这款谷歌平板电脑性能卓越，外观时尚，包装精美，是圣诞节、情人节、生日、成年礼的不二之选。

          <br>  High quality tablet
          <br>   ZZB is a specialist tablet manufacturer, We make quality tablets. our products ZB10 10.1 inch tablet is a high quality tablet, due to High Performance it is suitable for Kinds of Scenarios, Such as Reading, Photograph, videos, Music, Watch a Movie, Play a Game, or Surf the Internet. It makes your day joyful and convenient. It will be a good choice for the family entertainment and also can be a good gift to friends.



          <br>  10.1 inch android tablet


          <br>    10.1 inch HD Display android tablet
          <br>  ZB10 Android Tablet with 10'' 1280*800 HD Display, Enjoy brilliant colors, crisp text, vivid video viewing when you watch videos or play games.
        </div>
      </div>

    </div>
    <Footer></Footer>
    <div class="goods-submit">
      <div class="left">
        <div class="item-left">
          <span class="icon"><van-icon name="star-o" /></span>
          <p class="nav-list">收藏</p>
        </div>
        <div class="item-left">
          <span class="icon"><van-icon name="service-o" /></span>
          <p class="nav-list">客服</p>
        </div>
        <div @click="bottomShow=true" class="item-left">
          <span class="icon"><van-icon name="cart-circle-o" /></span>
          <p class="nav-list">购物车</p>
        </div>
<!--        <van-grid  icon-size="16" :border="false" :column-num="3">-->
<!--          <van-grid-item icon="star-o" >-->
<!--            <template slot="icon">-->
<!--              <span class="icon"><van-icon name="star-o" /></span>-->
<!--            </template>-->
<!--            <template slot="text">-->
<!--              <span class="start">收藏</span>-->
<!--            </template>-->
<!--          </van-grid-item>-->
<!--          <van-grid-item icon="star-o" >-->
<!--            <template slot="icon">-->
<!--              <span class="icon"><van-icon name="service-o" /></span>-->
<!--            </template>-->
<!--            <template slot="text">-->
<!--              <span class="start">客服</span>-->
<!--            </template>-->
<!--          </van-grid-item>-->
<!--          <van-grid-item @click="bottomShow=true" icon="star-o" >-->
<!--            <template slot="icon">-->
<!--              <span class="icon"><van-icon name="cart-circle-o" /></span>-->
<!--            </template>-->
<!--            <template slot="text">-->
<!--              <span class="start">购物车</span>-->
<!--            </template>-->
<!--          </van-grid-item>-->
<!--        </van-grid>-->
      </div>
      <div @click="$router.push('/orderChecked')" class="submit">
        <p>$ 250</p>
        <p>立即购买</p>
      </div>
    </div>

    <van-popup v-model="bottomShow" position="bottom" closeable  round >
      <div class="prop-bottom">
        <div class="title">添加购物车</div>
        <div class="goods">
          <div class="left">
            <img src="@/assets/image/81mXds2xD1L._AC_UL1500_.jpg" alt="">
          </div>
          <div class="right">
            <p class="price">$ 20.01</p>
            <p class="content">已选： 颜色: 4. 4 件装：安全带 (X4)（节省 15 美元） </p>
            <div class="content">
              数量：x1
            </div>
          </div>

        </div>
        <div class="button-goods">
          <p class="title-goods">尺码: 4 件装（节省 15 美元）</p>
          <div class="btn-goods">
            <a class="btn-chose" href="javascript:void (0)">4 件装（节省 15 美元）</a>
            <a class="btn-chose" href="javascript:void (0)">4 件装（节省 15 美元）</a>
            <a class="btn-chose" href="javascript:void (0)">4 件装（节省 15 美元）</a>
            <a class="btn-chose" href="javascript:void (0)">4 件装（节省 15 美元）</a>
          </div>
        </div>
        <div class="goods-popup-box">
          <p class="popup-title">颜色: 4. 4 件装：安全带 (X4)（节省 15 美元）</p>
          <div class="popup-box">
            <div class="box active">
              <img src="@/assets/image/81mXds2xD1L._AC_UL1500_.jpg" alt="">
            </div>
            <div class="box">
              <img src="@/assets/image/81mXds2xD1L._AC_UL1500_.jpg" alt="">
            </div>
            <div class="box">
              <img src="@/assets/image/81mXds2xD1L._AC_UL1500_.jpg" alt="">
            </div>
            <div class="box">
              <img src="@/assets/image/81mXds2xD1L._AC_UL1500_.jpg" alt="">
            </div>
            <div class="box">
              <img src="@/assets/image/81mXds2xD1L._AC_UL1500_.jpg" alt="">
            </div>
          </div>
        </div>
        <div class="bottom-popup-plus">
          <span>数量</span>
          <van-stepper button-size="24" v-model="value" />
        </div>
        <van-button  style="margin-top: 15px" color="#002FFF" disabled type="primary" block>确定</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Footer from '@/components/flooter/index'
  export default {
  components:{Footer},
    data(){
      return{
        active:1,
        checkedBox:1,
        bottomShow:false,
        currentIndex: 0,
        value:1,
        goods:[
          {id:1,img:require('@/assets/image/81HqJDE2GoL._AC_UL1500_.jpg')},
          {id:2,img:require('@/assets/image/81uqiMuZBKL._AC_UL1500_.jpg')},
          {id:3,img:require('@/assets/image/81mXds2xD1L._AC_UL1500_.jpg')},
          {id:4,img:require('@/assets/image/81Tt4ubLceL._AC_UL1500_.jpg')},
          {id:5,img:require('@/assets/image/81XJTc4MT4L._AC_UL1500_.jpg')},
          {id:6,img:require('@/assets/image/81Z2t0VXBDL._AC_UL1500_.jpg')},
          {id:7,img:require('@/assets/image/817CJR7LksL._AC_UL1500_.jpg')},
          {id:8,img:require('@/assets/image/81mXds2xD1L._AC_UL1500_.jpg')},
        ]
      }
    },
    methods:{
      goBack(){
        this.$router.go(-1)
      },
      onChange(index) {
        this.currentIndex = index;
      },
      tabsColor(index) {
        this.active=index
        // 获取对应iddom
        switch (index){
          case 1:{
            window.scrollTo({top: 0, behavior: "smooth",});
            break
          }
          case 2:{
            const tabsId = document.querySelector(`#userReviews`);
            if (tabsId) {
              window.scrollTo({top: tabsId.offsetTop, behavior: "smooth"});
            }
            break
          }
          case 3:{
            const tabsId = document.querySelector(`#productDesc`);
            if (tabsId) {
              window.scrollTo({top: tabsId.offsetTop, behavior: "smooth"});
            }
          }
        }
        const tabsId = document.querySelector(`#tabs${index}`);
        // 判断进行平滑滚动
        if (tabsId) {
          window.scrollTo({
            top: tabsId.offsetTop,
            behavior: "smooth",
          });
        }
      },
    }
  }
</script>

<style scoped lang="scss">
.goods-bgk-box{
  width: 100%;
  min-height: 100vh;
  scroll-behavior:smooth !important;
  height: 100%;
  background: #fff;
  .goods-box-header{
    width: 100%;
    background: #fff;
    height: 45px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 999;
    .back{
      width: 45px;
      height: 45px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22px;
    }
    .change-active{
      width: 100px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      box-sizing: border-box;
      padding: 12px 0 0 0;
      p{
        height: 35px;
        text-align: center;
        width: 100%;
        font-size: 14px;
        font-weight: 600;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

      }
      span{
        margin-top: -20px;
        display: flex;
        width: 70px;
        height: 2.5px;
        border-radius: 2px;
        background: #002FFF;
      }
    }
  }
  .safe{
    width: 100%;
    height: 45px;
  }
  .goods-nav-image{
    width: 100%;
    height: 440px;
    overflow: hidden;
    .product-item{
      width: 100%;
      height: 400px;
      .item{
        img{
          height: 400px ;
        }
      }
    }

  }
  .goods-item{
    width: 100%;
    min-height: 50px;
    padding: 0 3%;
    box-sizing: border-box;
    .content-desc{
      width: 100%;
      font-size: 14px;
      margin-bottom: 10px;
    }
    .goods-home{
      width: 100%;
      border-top: 1px solid #f6f6f6;
      border-bottom: 1px solid #f6f6f6;
      height: 45px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      span{
        font-size: 14px;
        color: #aaa;
        i{
          font-size: 14px;
          color: #002FFF;
          font-style: normal;
        }
      }
    }
    .good-image{
      width: 100%;
      min-height: 100px;
      border-bottom: 1px solid #f6f6f6;

      .good-title{
        width: 100%;
        font-size: 14px;
        min-height: 20px;
        line-height: 20px;
        margin-top: 8px;
        margin-bottom: 8px;
        display: flex;
        flex-wrap: wrap;
        .btn-title-goods{
          padding: 4px 10px;
          background: #002FFF;
          margin-right: 10px;
          margin-bottom: 10px;
          text-align: center;
          color: #fff;

          font-size: 12px;
          border-radius: 5px;
        }
      }
      .margin-bottom{
        margin-top: 15px;
        font-size: 12px;
      }
      .box-image{
        width: 100%;
        min-height: 50px;
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        padding: 0 0 15px 0;
        box-sizing: border-box;
        .box-checked{
          box-sizing: border-box;
          border: 2px solid #002FFF !important;
        }
        .box{
          margin-right: 10px;
          width: 40px;
          border:1px solid #f6f6f6;
          border-radius: 5px;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          img{
            width: 35px;
            height: 35px;
            border-radius: 5px;
          }
        }
      }
    }
    .good-cell-box{
      width: 100%;
      min-height: 50px;
      border-bottom: 1px solid #f6f6f6;
      display: flex;
      justify-content: space-between;
      padding: 10px 0 10px 0;
      box-sizing: border-box;
      .width-50{
        width: 60px;
      }
      .width-80{
        width: 80px;
      }
      .width-150{
        width: 150px;
      }
      .label{
        font-size: 12px !important;
      }
      .content{
        width: 100%;
        font-size: 12px;
      }
      .icon{
        font-size: 14px;
        display: flex;
        align-items: center;
        width: 100px;
      }
    }
    .good-cell-chat{
      width: 100%;
      min-height: 80px;
      padding: 10px 0;
      box-sizing: border-box;
      .top{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 20px;
        font-size: 14px;
      }
      .content{
        display: flex;
        padding: 15px 0 ;
        box-sizing: border-box;
        flex-wrap: wrap;
        border-bottom: 1px solid #f6f6f6;
        span{
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 6px 8px;
          font-size: 12px;
          background: #f6f6f6;
          border-radius: 15px;
          color: #666666;
          margin-right: 10px;
          margin-bottom: 5px;
        }
      }
    }
    .goods-chat{
      width: 100%;
      min-height: 200px;
      padding: 10px 0 10px 0;
      border-bottom: 1px solid #f6f6f6;
      box-sizing: border-box;
      .chat-top{
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        img{
          height: 30px;
          border-radius: 50%;
        }
        span{
          margin-left: 10px;
          font-size: 14px;
          color: #333;
        }
      }
      .goods-rate{
        width: 100%;
        height: 20px;
        span{
          font-size: 12px;
          color: #002FFF;
          font-weight: 500;
          margin-left: 10px;
        }
      }
      .good-content{
        margin-top: 15px;
        font-size: 12px;
      }
      .time{
        width: 100%;
        font-size: 10px;
        height: 40px;
        color: #aaa;
        line-height: 40px;
      }
    }
    .store-shop{
      width: 100%;
      height: 150px;
      border-radius: 5px;
      border: 1px solid #f6f6f6;
      .store-top{
        width: 100%;
        height: 80px;
        border-bottom: 1px solid #f6f6f6;
        padding: 3%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        img{
          height: 50px;
          width: 50px;
          border-radius: 50%;
        }
        .right{
          width: 80%;
          height: 80px;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          padding: 20px 0;
          box-sizing: border-box;
          margin-left: 15px;
          p{
            width: 100%;
          }
          p:nth-child(1){
            font-size: 14px;
            font-weight: 600;
          }
          p:nth-child(2){
            font-size: 10px;
          }
        }
        .shop-nov{
          display: flex;
          margin-left: 10px;
          justify-items: center;
          align-items: center;
          width: 100px;
          padding: 3px 4px;
          border-radius: 10px;
          border: 1px solid #002FFF;
          font-size: 10px;
          justify-content: center;
          background: #fcf2e2;
          color: #002FFF;
        }
      }
      .store-bottom{
        padding: 10px 0 0 0;
        box-sizing: border-box;
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .box{
          width: 60px;
          height: 60px;
          text-align: center;
          font-size: 12px;
          p:nth-child(1){
            margin-top: 15px;
            font-weight: 700;
          }
          p:nth-child(2){
            margin-top: 5px;
          }
        }
        span{
          display: flex;
          width: 1px;
          height: 20px;
          background:#eee;
        }
      }
    }
    .product-info{
      width: 100%;
      min-height: 100px;
      margin-top: 20px;
      .title{
        font-size: 14px;
        margin-top: 20px;
      }
      .content{
        font-size: 14px;
        margin-top: 15px;
        line-height: 20px;
      }
    }
  }
  .goods-submit{
    width: 100%;
    height: 60px;
    position: fixed;
    background: #fff;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    z-index: 1000;
    .left{
      width: 100%;
      height: 60px;
      padding: 0 0 10px 0;
      box-sizing: border-box;
      display: flex;
      .item-left{
        width: 30%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding: 15px 0;
        box-sizing: border-box;
        .icon{
          font-size: 18px;
        }
        .nav-list{
          width: 100%;
          text-align: center;
          font-size: 12px;
        }
      }

    }
    .submit{
      width: 200px;
      height: 60px;
      background: #002FFF;
      padding: 3%;
      box-sizing: border-box;
      p:nth-child(1){
        font-size: 14px;
        color: #fff;
        width: 100%;
        margin-top: 5px;
        text-align: center;
      }
      p:nth-child(2){
        font-size: 14px;
        width: 100%;
        text-align: center;
        color: #fff;
      }
    }
  }
  .prop-bottom{
    width: 100%;
    min-height: 300px;
    padding: 3% 5%;
    box-sizing: border-box;
    .title{
      width: 100%;
      height: 40px;
      font-size: 16px;
      text-align: center;
      line-height: 40px;
    }
    .goods{
      width: 100%;
      margin: 15px 0;
      height: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left{
        width: 60px;
        height: 60px;
        padding: 3px;
        border-radius: 5px;
        border: 1px solid #f6f6f6;
        img{
          width: 60px;
          height: 60px;
        }
      }
      .right{
        width: 100%;
        min-height: 60px;
        margin-left: 10px;
        .price{
          font-size: 18px;
          color: #002FFF;
        }
        .content{
          width: 100%;
          font-size: 12px;
          color: #333;
          white-space: normal;
          word-break: break-word;
        }
      }
    }
    .button-goods{
      width: 100%;
      .title-goods{
        width: 100%;
        margin-top: 10px;
        font-size: 14px;
      }
      .btn-goods{
        width: 100%;

        display: flex;
        flex-wrap: wrap;
        .btn-chose{
          display: block;
          padding: 5px 10px;
          background: #002FFF;
          color: #fff;
          margin-right: 10px;
          text-align: center;
          border-radius: 5px;
          font-size: 14px;
          margin-top: 10px;
        }
      }
    }
    .goods-popup-box{
      width: 100%;
      margin-top: 15px;
      .popup-title{
        width: 100%;
        font-size: 14px;
      }
      .popup-box{
        width: 100%;
        display: flex;
        padding: 10px 0;
        box-sizing: border-box;
        flex-wrap: wrap;
        .box{
          height: 50px;
          width: 50px;
          margin-right: 10px;
          border-radius: 5px;
          border: 1px solid #f6f6f6;
          padding:2px;
          box-sizing: border-box;
          img{
            height: 40px;
            width: 40px;
          }
        }
        .active{
          border: 2px solid #002FFF;
        }
      }
    }
    .bottom-popup-plus{
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span{
        font-size: 14px;
      }
    }
  }
}
.dot{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 8px;
  .custom-indicator{
    margin: 0 3px;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: #c6c6c6;
    opacity: 0.6;
  }
  .active{
    opacity: 1;
    background: #002FFF;
  }
}
.start{
  font-size: 12px;
}
.icon{
  font-size: 18px ;
}
</style>
